/* flow transition */
.flow {
  -webkit-transform-origin: 50% 30%;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  -moz-transform-origin: 50% 30%;
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  transform-origin: 50% 30%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); }

.ui-dialog.flow {
  -webkit-transform-origin: none;
  -webkit-box-shadow: none;
  -moz-transform-origin: none;
  -moz-box-shadow: none;
  transform-origin: none;
  box-shadow: none; }

.flow.out {
  -webkit-transform: translateX(-100%) scale(0.7);
  -webkit-animation-name: flowouttoleft;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 350ms;
  -moz-transform: translateX(-100%) scale(0.7);
  -moz-animation-name: flowouttoleft;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 350ms;
  transform: translateX(-100%) scale(0.7);
  animation-name: flowouttoleft;
  animation-timing-function: ease;
  animation-duration: 350ms; }

.flow.in {
  -webkit-transform: translateX(0) scale(1);
  -webkit-animation-name: flowinfromright;
  -webkit-animation-timing-function: ease;
  -webkit-animation-duration: 350ms;
  -moz-transform: translateX(0) scale(1);
  -moz-animation-name: flowinfromright;
  -moz-animation-timing-function: ease;
  -moz-animation-duration: 350ms;
  transform: translateX(0) scale(1);
  animation-name: flowinfromright;
  animation-timing-function: ease;
  animation-duration: 350ms; }

.flow.out.reverse {
  -webkit-transform: translateX(100%);
  -webkit-animation-name: flowouttoright;
  -moz-transform: translateX(100%);
  -moz-animation-name: flowouttoright;
  transform: translateX(100%);
  animation-name: flowouttoright; }

.flow.in.reverse {
  -webkit-animation-name: flowinfromleft;
  -moz-animation-name: flowinfromleft;
  animation-name: flowinfromleft; }

@-webkit-keyframes flowouttoleft {
  0% {
    -webkit-transform: translateX(0) scale(1); }
  60%, 70% {
    -webkit-transform: translateX(0) scale(0.7); }
  100% {
    -webkit-transform: translateX(-100%) scale(0.7); } }
@-moz-keyframes flowouttoleft {
  0% {
    -moz-transform: translateX(0) scale(1); }
  60%, 70% {
    -moz-transform: translateX(0) scale(0.7); }
  100% {
    -moz-transform: translateX(-100%) scale(0.7); } }
@keyframes flowouttoleft {
  0% {
    transform: translateX(0) scale(1); }
  60%, 70% {
    transform: translateX(0) scale(0.7); }
  100% {
    transform: translateX(-100%) scale(0.7); } }
@-webkit-keyframes flowouttoright {
  0% {
    -webkit-transform: translateX(0) scale(1); }
  60%, 70% {
    -webkit-transform: translateX(0) scale(0.7); }
  100% {
    -webkit-transform: translateX(100%) scale(0.7); } }
@-moz-keyframes flowouttoright {
  0% {
    -moz-transform: translateX(0) scale(1); }
  60%, 70% {
    -moz-transform: translateX(0) scale(0.7); }
  100% {
    -moz-transform: translateX(100%) scale(0.7); } }
@keyframes flowouttoright {
  0% {
    transform: translateX(0) scale(1); }
  60%, 70% {
    transform: translateX(0) scale(0.7); }
  100% {
    transform: translateX(100%) scale(0.7); } }
@-webkit-keyframes flowinfromleft {
  0% {
    -webkit-transform: translateX(-100%) scale(0.7); }
  30%, 40% {
    -webkit-transform: translateX(0) scale(0.7); }
  100% {
    -webkit-transform: translateX(0) scale(1); } }
@-moz-keyframes flowinfromleft {
  0% {
    -moz-transform: translateX(-100%) scale(0.7); }
  30%, 40% {
    -moz-transform: translateX(0) scale(0.7); }
  100% {
    -moz-transform: translateX(0) scale(1); } }
@keyframes flowinfromleft {
  0% {
    transform: translateX(-100%) scale(0.7); }
  30%, 40% {
    transform: translateX(0) scale(0.7); }
  100% {
    transform: translateX(0) scale(1); } }
@-webkit-keyframes flowinfromright {
  0% {
    -webkit-transform: translateX(100%) scale(0.7); }
  30%, 40% {
    -webkit-transform: translateX(0) scale(0.7); }
  100% {
    -webkit-transform: translateX(0) scale(1); } }
@-moz-keyframes flowinfromright {
  0% {
    -moz-transform: translateX(100%) scale(0.7); }
  30%, 40% {
    -moz-transform: translateX(0) scale(0.7); }
  100% {
    -moz-transform: translateX(0) scale(1); } }
@keyframes flowinfromright {
  0% {
    transform: translateX(100%) scale(0.7); }
  30%, 40% {
    transform: translateX(0) scale(0.7); }
  100% {
    transform: translateX(0) scale(1); } }
